<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建用户 - API测试</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .container {
            max-width: 800px;
            margin-top: 2rem;
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
        .header-actions {
            margin-bottom: 2rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-actions">
            <h1>新建用户</h1>
            <a href="list.html" class="btn btn-secondary">返回列表</a>
        </div>

        <!-- 表单区域 -->
        <form id="createForm">
            <div class="form-group">
                <label for="username" class="form-label">用户名 *</label>
                <input type="text" class="form-control" id="username" name="username" required placeholder="请输入用户名">
            </div>

            <div class="form-group">
                <label for="email" class="form-label">邮箱 *</label>
                <input type="email" class="form-control" id="email" name="email" required placeholder="请输入邮箱">
            </div>

            <div class="form-group">
                <label for="password" class="form-label">密码 *</label>
                <input type="password" class="form-control" id="password" name="password" required placeholder="请输入密码">
            </div>

            <div class="form-group">
                <label for="role" class="form-label">角色 *</label>
                <select class="form-select" id="role" name="role" required>
                    <option value="user">普通用户</option>
                    <option value="admin">管理员</option>
                    <option value="seller">商家</option>
                </select>
            </div>

            <div class="form-group">
                <label for="phone" class="form-label">手机号</label>
                <input type="tel" class="form-control" id="phone" name="phone" placeholder="请输入手机号">
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">创建</button>
                <a href="list.html" class="btn btn-secondary ms-2">取消</a>
            </div>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script type="module" src="../js/api.js"></script>
    <script type="module" src="js/create.js"></script>
</body>
</html>